<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span id="num">{{num}}</span> <br> <br>
    <button @click="add()">赞！</button>
    <h2>{{name}}有{{num}}次点赞</h2>
</div>

<script src="vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            name:"gz",
            num:0
        },
        methods:{
                show(){
                    return this.name
                },
            add(){
                    this.num++
            }
        },
        beforeCreate(){ //生命周期函数-创建vue实例
            console.log("=========beforeCreate=========")
            console.log("数据池数据是否加载/使用[no]",this.name,this.num)
            // console.log("自定义方法能否加载/使用[no]",this.show())
            console.log("用户页面dom是否被加载[yes]",document.getElementById("num"))
            console.log("用户页面dom是否被渲染[no]",document.getElementById("num").innerText)
        },
        created(){ //生命周期函数-创建vue实例
            console.log("=========created=========")
            console.log("数据池数据是否加载/使用[yes]",this.name,this.num)
            console.log("自定义方法能否加载/使用[yes]",this.show())
            console.log("用户页面dom是否被加载[yes]",document.getElementById("num"))
            console.log("用户页面dom是否被渲染[no]",document.getElementById("num").innerText)
            //发出ajax请求
            //接收返回的数据
            //再次去更新data池中的数据
            //编译内存模版结构
            //...
        },
        beforeMount(){//生命周期函数-生命周期挂载前
            console.log("=========beforeMount=========")
            console.log("数据池数据是否加载/使用[yes]",this.name,this.num)
            console.log("自定义方法能否加载/使用[yes]",this.show())
            console.log("用户页面dom是否被加载[yes]",document.getElementById("num"))
            console.log("用户页面dom是否被渲染[no]",document.getElementById("num").innerText)
        },
        mounted(){ //生命周期函数-生命周期挂载后
            console.log("=========mounted=========")
            console.log("数据池数据是否加载/使用[yes]",this.name,this.num)
            console.log("自定义方法能否加载/使用[yes]",this.show())
            console.log("用户页面dom是否被加载[yes]",document.getElementById("num"))
            console.log("用户页面dom是否被渲染[yes]",document.getElementById("num").innerText)
        },
        beforeUpdate(){ //生命周期函数-数据池更新前   (注意，只有数据变化才会执行该操作)
            console.log("=========beforeUpdate=========")
            console.log("数据池数据是否加载/使用[yes]",this.name,this.num)
            console.log("自定义方法能否加载/使用[yes]",this.show())
            console.log("用户页面dom是否被加载[yes]",document.getElementById("num"))
            console.log("用户页面dom数据是否被更新[no]",document.getElementById("num").innerText)
        },
        updated(){//生命周期函数-数据池更新后
            console.log("=========updated=========")
            console.log("数据池数据是否加载/使用[yes]",this.name,this.num)
            console.log("自定义方法能否加载/使用[yes]",this.show())
            console.log("用户页面dom是否被加载[yes]",document.getElementById("num"))
            console.log("用户页面dom数据是否被更新[yes]",document.getElementById("num").innerText)
        }
    })
</script>
</body>
</html>